<template>
  <div class="charge_standards">
    <div class="top_search">
      <a-form :model="searchForm" layout="vertical">
        <div class="form_con">
          <a-form-item class="form_item" label="标准名称">
            <a-input v-model:value="searchForm.name" placeholder="请输入" />
          </a-form-item>
          <a-form-item class="form_item" label="计费模式">
            <a-select placeholder="请选择" v-model:value="searchForm.mode">
              <a-select-option
                v-for="(item, index) in modelList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item class="form_item" label="状态">
            <a-select placeholder="请选择" v-model:value="searchForm.status">
              <a-select-option
                v-for="(item, index) in statusList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item class="form_item" style="width: 200px" label=" ">
            <a-button type="primary" @click="searchThis">
              <template #icon>
                <SearchOutlined />
              </template>
              搜索
            </a-button>
            <a-button
              type="default"
              style="margin-left: 10px"
              @click="clearSearch()"
              >清除选项</a-button
            >
          </a-form-item>
        </div>
      </a-form>
    </div>

    <div class="table_con">
      <div class="table_name_operate">
        <div class="left_name">收费标准列表</div>
        <div class="right_operate">
          <a-button type="primary" @click="addStandards">
            新建收费标准
            <template #icon>
              <PlusOutlined />
            </template>
          </a-button>
        </div>
      </div>
      <div class="table_list">
        <a-table
          sticky
          rowKey="id"
          :loading="tableLoading"
          :dataSource="tableList"
          :columns="tableColumns"
          :pagination="pagination"
          :scroll="{ x: 'max-content' }"
          @change="tableChange"
        >
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'name'">
              <a-button type="link" @click="editStandard(record)">{{
                record.name
              }}</a-button>
            </template>
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status == 1 ? '#87d068' : '#f50'">{{
                record.status == 1 ? "生效中" : "已失效"
              }}</a-tag>
            </template>
            <template v-if="column.key === 'bindOjbectText'">
              <a-tag :color="record.bind_object == 2 ? 'cyan' : 'blue'">
                <template #icon>
                  <HomeOutlined v-if="record.bind_object == 1" />
                  <CarOutlined v-if="record.bind_object == 2" />
                </template>
                {{ record.bindOjbectText }}
              </a-tag>
            </template>
            <template v-if="column.key === 'expire_time'">
              <span v-if="!record.remainngTime">{{ record.expire_time }}</span>
              <a-tooltip color="orange" placement="right" v-else>
                <template #title>
                  距离失效还有{{ record.remainngTime }}小时
                </template>
                <span style="color: #faad14">{{ record.expire_time }}</span>
              </a-tooltip>
            </template>
            <template v-if="column.key === 'unit_price'">
              {{ record.unit_price }}
              <a-tag v-if="record.unitText" :bordered="false" color="green"
                >x {{ record.unitText }}</a-tag
              >
            </template>
            <template v-if="column.key === 'bind_list'">
              <a-button type="link" @click="bindThis(record)"
                >绑数据源+生成账单</a-button
              >
            </template>
            <template v-if="column.key === 'action'">
              <!-- <a-button type="link" @click="editStandard(record)">编辑</a-button> -->
              <!-- <a-divider type="vertical" /> -->
              <a-popconfirm
                v-if="record.status == 1"
                title="确定要作废该标准吗?此操作无法恢复！"
                ok-text="确定"
                cancel-text="再想想"
                @confirm="expireThis(record)"
                @cancel="() => {}"
              >
                <a-button type="link">立即失效</a-button>
              </a-popconfirm>
              <a-divider type="vertical" v-if="record.status == 1" />
              <a-button
                @click="deleteConfirm(record)"
                type="link"
                style="color: red"
                >删除</a-button
              >
            </template>
          </template>
        </a-table>
      </div>
    </div>

    <editModal
      :visible="editVisible"
      :standard_id="standard_id"
      @close="closeEdit"
    />
    <bindList
      :visible="bindVisible"
      :standardInfo="standardInfo"
      @close="closeBind"
    />
  </div>
</template>
<script>
import {
  defineComponent,
  onBeforeUnmount,
  reactive,
  ref,
  toRaw,
  toRefs,
  watch,
  computed,
  createVNode,
  nextTick,
} from "vue";
import {
  QuestionCircleOutlined,
  SearchOutlined,
  PlusOutlined,
  ExclamationCircleOutlined,
  CarOutlined,
  HomeOutlined,
} from "@ant-design/icons-vue";
import editModal from "./modules/editModal.vue";
import bindList from "./modules/bindList.vue";
import request from "../../../common/utils/request";
import { message, Modal } from "ant-design-vue";
export default defineComponent({
  components: {
    SearchOutlined,
    PlusOutlined,
    CarOutlined,
    HomeOutlined,
    editModal,
    bindList,
  },
  setup(props, context) {
    const state = reactive({
      editVisible: false,
      bindVisible: false,
      standard_id: null,
      standardInfo: {},
      searchForm: {
        name: "",
        mode: null,
        status: null,
      },
      modelList: [
        {
          label: "单价",
          value: 1,
        },
        {
          label: "单价*计量单位",
          value: 2,
        },
      ],
      statusList: [
        {
          label: "生效中",
          value: 1,
        },
        {
          label: "已失效",
          value: 0,
        },
      ],

      tableLoading: false,
      pagination: {
        current: 1,
        pagiSize: 10,
        showSizeChanger: true,
        showTotal: (total, range) => `总数: ${total} 条`,
      },
      tableList: [],
      tableColumns: [
        {
          title: "标准名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "收费模式",
          dataIndex: "cashTypeText",
          key: "cashTypeText",
        },
        {
          title: "计费模式",
          dataIndex: "modeText",
          key: "modeText",
        },
        {
          title: "单价",
          dataIndex: "unit_price",
          key: "unit_price",
        },
        {
          title: "生效时间",
          dataIndex: "valid_time",
          key: "valid_time",
        },
        {
          title: "失效时间",
          dataIndex: "expire_time",
          key: "expire_time",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
        },
        {
          title: "所属项目",
          dataIndex: "village_name",
          key: "village_name",
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
          key: "created_at",
        },
        {
          title: "绑定对象",
          dataIndex: "bindOjbectText",
          key: "bindOjbectText",
        },
        {
          title: "绑定列表",
          dataIndex: "bind_list",
          key: "bind_list",
        },
        {
          title: "操作",
          dataIndex: "id",
          key: "action",
        },
      ],
    });

    const searchThis = () => {
      getTableList();
    };

    const clearSearch = () => {
      state.searchForm = {
        name: "",
        mode: null,
        status: null,
      };
      state.pagination.current = 1;
      getTableList();
    };

    const tableChange = ({ current, pageSize }) => {
      state.pagination.current = current;
      state.pagination.pagiSize = pageSize;
      getTableList();
    };

    const getTableList = () => {
      let params = {};
      params.page = state.pagination.current;
      params.pageSize = state.pagination.pagiSize;
      Object.assign(params, state.searchForm);
      state.tableLoading = true;
      request
        .get("/org", "/standard/list", params)
        .then((res) => {
          state.pagination.total = res.result.total;
          state.tableList = res.result.data;
          state.tableLoading = false;
        })
        .catch((err) => {
          state.tableLoading = false;
        });
    };

    getTableList();

    const closeEdit = (flag) => {
      state.editVisible = false;
      state.standard_id = null;
      if (flag) {
        getTableList();
      }
    };

    const addStandards = () => {
      state.editVisible = true;
    };

    const editStandard = (record) => {
      state.editVisible = true;
      state.standard_id = record.id;
    };

    const bindThis = (record) => {
      state.bindVisible = true;
      state.standardInfo = record;
    };

    const closeBind = () => {
      state.bindVisible = false;
      state.standardInfo = {};
    };

    const deleteConfirm = (record) => {
      Modal.confirm({
        title: () => "提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () =>
          "确定要删除【" + record.name + "】标准吗？此操作无法恢复！",
        onOk() {
          request
            .del("/org", "/standard/delete", { id: record.id })
            .then((res) => {
              message.success("删除成功！");
              getTableList();
            });
        },
        onCancel() {},
      });
    };

    const expireThis = (record) => {
      request
        .put("/org", "/standard/invalid/status", { id: record.id })
        .then((res) => {
          message.success("操作成功！");
          getTableList();
        });
    };

    return {
      ...toRefs(state),
      searchThis,
      clearSearch,
      tableChange,
      addStandards,
      closeEdit,

      bindThis,
      closeBind,
      deleteConfirm,
      expireThis,
      editStandard,
    };
  },
});
</script>
<style lang="less" scoped>
.charge_standards {
  height: 100%;
  width: 100%;
  background-color: #fff;
  padding: 20px;

  .top_search {
    margin-top: 10px;
    min-height: 88px;
    display: flex;
    align-items: center;

    .form_con {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      transform: translateX(-10px);

      .form_item {
        width: 200px;
        margin-left: 10px;
      }
    }
  }

  .table_con {
    margin-top: 10px;

    .table_name_operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .table_list {
      margin-top: 10px;
    }
  }
}
</style>
